<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="Handheldfriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <link rel="stylesheet" href="css/layui.mobile.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <script src="js/jquery/rem.min.js"></script>
    <script src="js/common.js"></script>
	<title>更多</title>
<style>
    .black_overlay{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .white_content {
    display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 80%;
        background-color: white;
        border-radius: 5px;
        z-index: 1002;
        overflow: auto;
        margin-left: -40%;
        height: 210px;
        margin-top: -110px;
        padding-bottom: 10px;
    }.spinner{width:20px;height:20px;position:fixed;z-index:1002;top:50%;margin-top:-10px;left:50%;margin-left:-10px}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#ff536a;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}#loading .mask{position:fixed;width:100%;background-color:#fff;top:0;left:0;height:100%;z-index:1001}

</style>

</head>
<body>
<div id="loading">
    <div class="mask"></div>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
<div id="wrap" onscroll="gcscroll(this)">
	   <div class="details">
            <i style="font-size:14px;color:#ff7a8f;line-height:40px;font-style: normal;">附近</i>
            <i class="icon-tasks sxbtn2"  onclick="ShowDiv('MyDiv','fade')"></i>
            <input type="button" id="Button1" value="筛选" onclick="ShowDiv('MyDiv','fade')" style="color: #ff7a8f;border:none;line-height:40px;background-color:#fff; font-size:14px; float:right;">
           <div id="fade" class="black_overlay"></div>
            <div id="MyDiv" class="white_content">
                <div>
                    <p  class="top">性别</p>
                    <input type="button" name="sex" data-id="0" value="全部" class="bone" style="margin: 0 0 0 20%;" onclick="addClass1(this)">
                    <input type="button" name="nan" data-id="1" value="男" class="bone" onclick="addClass1(this)">
                    <input type="button" name="nv" data-id="2" value="女" class="bone" onclick="addClass1(this)">
                    <div style="border-bottom:1px solid #c1c1c1;width:90%;margin:10px auto;"></div>
                    <input hidden id="sex" value="0">
                </div>
                <div class="two">
                    <p class="top">活跃时间</p>
                    <input type="button" name="shi" data-id="600" value="10分钟" class="btwo" style="margin: 0 0 0 10%;" onclick="addClass2(this)">
                    <input type="button" name="san" data-id="1800" value="30分钟" class="btwo" onclick="addClass2(this)">
                    <input type="button" name="day" data-id="86400" value="1天" class="btwo" onclick="addClass2(this)">
                    <input type="button" name="sanday" data-id="259200" value="3天" class="btwo" onclick="addClass2(this)">
                    <div style="border-bottom:1px solid #c1c1c1;width:90%;margin: 10px auto;"></div>
                    <input hidden id="hytime" value="">
                </div>
                 <div style="width:100%;height: 20%; margin:0 auto;">
                    <input type="button" class="bsan" name="ok" id="ok" value="确定" onclick="CloseDiv('MyDiv','fade')" style="margin:5% 10% 5% 25%;">
                    <input type="button" class="bsan" name="no" id="no" value="取消" onclick="CloseDiv('MyDiv','fade')">
                </div>
            </div><!-- 筛选 -->
        </div> 
        <!-- 人物信息列表 -->
    <div class="figures-list" style="padding-bottom:10px;">
        <ul id="list">
        </ul>
    </div>
</div>
<div id="loadingToast" style="display: none">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>
<script type="text/javascript" src="js/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/ckgd.js"></script>
<script>
    Utils.historyBack(function () {
        window.location.href = 'index.html';
    });
    var Whei=$(window).height();
    $("#wrap").css("height",Whei);
    function ShowDiv(show_div,bg_div){
        document.getElementById(show_div).style.display='block';
        document.getElementById(bg_div).style.display='block' ;
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
        // bgdiv.style.height = $(document).height();
        $("#"+bg_div).height($(document).height());
    };
    //关闭弹出层
    function CloseDiv(show_div,bg_div) {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    };
    function addClass1(obj) {
        var $this=$(obj);
        var id=$this.attr("data-id");
        $this.addClass("active").siblings().removeClass("active");
        $("#sex").val(id);
    }
    function addClass2(obj) {
        var $this=$(obj);
        var id=$this.attr("data-id");
        $this.addClass("active").siblings().removeClass("active");
        $("#hytime").val(id);
        //console.log($("#hytime").val())
    }
</script>
</body>
</html>